<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <div>
        zhehsi
        <p>这是一个p</p>
        <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ul>
    </div> -->
</body>
<script>
    //先根据这个实际的dom定义虚拟dom的内容
    let oDiv = {
        tagName: "div",
        props: {
            id: "app",
            style: {
                height: "100px",
                color: "red",
                fontSize: "20px",
                backgrond: "red"
            }
        },

        children: [{
                tagName: "p",
                props: {
                    class: ["pp", "pppp"],
                    style: {
                        color: "skyblue",
                        background: "green"
                    }
                },
                children: "1"
            },
            {
                tagName: "ul",
                props: {
                    class: ["uul"],
                    style: {
                        backgrond: "yellow",
                        color: "skyblue",
                        background: "red",
                        fontSize: "40px"
                    }
                },
                children: [{
                        tagName: "li",
                        props: {
                            style: {
                                backgrond: "white"
                            }
                        },
                        children: '1'
                    },
                    {
                        tagName: "li",
                        props: {
                            style: {
                                backgrond: "pink"
                            }
                        },
                        children: '2'
                    }

                ]
            },

        ]
    }



    function realDom(vNode) {
        const {
            tagName,
            props,
            children
        } = vNode
        let rNode = document.createElement(tagName)
        //用object.keys循环遍历props给rnode添加样式
        Object.keys(props).forEach(item => {
            if (item === "style") {
                Object.keys(props[item]).forEach(item1 => {
                    rNode.style[item1] = props[item][item1]
                })

            } else if (item === "class") {
                props[item].forEach(item4 => {
                    rNode.classList.add(item4)

                })
            } else {
                rNode.setAttribute(item, props[item])
            }
        })


        //然后判断children
        if (typeof children === "string") {
            console.log(children)
            let oText = document.createTextNode(children)
            rNode.appendChild(oText)
        } else {
            console.log(children)
            children.forEach(item => {
                rNode.appendChild(realDom(item))
            })

        }
        return rNode
    }
    document.body.appendChild(realDom(oDiv))
</script>

</html>